<template>
  <!-- 倒计时组件 -->
  <div class="downTime-wrapper">
    <!-- 这里是显示还未结束时的内容，这里只是我这得布局，你可以随意。 -->
    <div class="time" v-show="!isShow">
      <!-- <span class="hour">{{myDay}}</span> :  -->
      <span class="hour">{{myHours}}</span>:
      <span class="minute">{{myMinutes}}</span>:
      <span class="second">{{mySeconds}}</span>
    </div>
    <!-- 这里是显示结束后的内容 -->
    <span class="second" v-show="isShow">{{clocker}}</span>
  </div>
</template>
<script>
export default {
  name: "downTime",

  props: {
    // 接收父组件传递过来的参数,这里传了  结束时间 - 开始时间 - 结束后显示的内容
    endTime: {
      type: Number
    },
    startTime: {
      type: Number
    },
    endMsg: {
      type: String
    }
  },

  data() {
    return {
      isShow: false, // 控制显示结束或还未结束显示的内容
      clocker: "", // 结束后显示的内容
      timeObj: null, // 时间对象,下方会用到
      myDay: 0, // 我定义来接收计算出来的 天 的
      myHours: 0, // 我定义来接收计算出来的 小时 的
      myMinutes: 0, // 我定义来接收计算出来的 分钟 的
      mySeconds: 0, // 我定义来接收计算出来的 秒钟 的
      fistTip: true,
      firstSub:true,
      duration:0,//考试时长
      Timer:null
    };
  },
  methods: {
    add(num) {
      // 判断当前是否时分秒的值是否大于10
      return num < 10 ? "0" + num : num;
    },
    parse() {
      //暂停
      clearInterval(this.Timer);
    },
    start() {
     // 开始执行倒计时
      this.timeFunction();
      // 每一秒执行一次
      this.Timer = setInterval(() => {
        this.timeFunction();
      }, 1000);
    },
    timeFunction() {
      let time = this.timeLag--;
      this.duration++;
      if (time < 300 && this.fistTip) {
        this.fistTip = false;
        this.$alert("还有五分钟考试就要结束了", "考试时间", {
          confirmButtonText: "确定",
          callback: action => {
          }
        });
      }
      if(time <= 0 && this.firstSub){
        this.firstSub = false;
        this.$emit("submit")
      }
      this.timeObj = {
        // 时间对象
        seconds: Math.floor(time % 60),
        minutes: Math.floor(time / 60) % 60,
        hours: Math.floor(time / 60 / 60) % 24,
        days: Math.floor(time / 60 / 60 / 24)
      };
      // 计算出时分秒
      this.myDay = `${this.add(this.timeObj.days)}`;
      this.myHours = `${this.add(this.timeObj.hours)}`;
      this.myMinutes = `${this.add(this.timeObj.minutes)}`;
      this.mySeconds = `${this.add(this.timeObj.seconds)}`;
      // 当时间差小于等于0时,停止倒计时
      if (time <= 0) {
        this.isShow = true;
        this.clocker = this.endMsg || "考试结束";
      }
    }
  },
  mounted() {
    // 计算时间差
    this.timeLag = (this.endTime - this.startTime) / 1000;
    // 时间倒计时运算的方法
    this.start();
  },
  beforeDestroy(){
    clearTimeout(this.Timer)
  }
};
</script>
<style scoped>
.time {
  color: #cc0000;
}
</style>
